<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除浮动：浮动一定要完全封闭到一个盒子里，否则就会对页面后续元素产生影响 */
        /* 清除浮动方法1：让内部有浮动的父盒子形成BFC,他就能关住内部浮动的元素。 overflow:hidden 【常用 margin有效】*/
        /* 清除浮动方法2：给后面的盒子设置clear:both属性 clear表示清除浮动对自己的影响 both表示左右浮动都清除 【不好 margin会失效】*/
        /* 清除浮动方法3：使用::after伪元素给盒子添加最后一个子元素，并给::after设置content:'';clear:both;display:block;【常用 margin有效】*/
        /* 清除浮动方法4：在两个父盒子之间隔墙 隔一个携带clear:both的墙 墙可设置高度*/
        *{
            margin:0;
            padding:0;
        }
        /* 清除浮动方法1：让内部有浮动的父盒子形成BFC */
            /* div{overflow: hidden;} */
        /* 清除浮动方法2：给后面的盒子设置clear:both属性 */
         /* .box2{clear:both;} */
        /* 清除浮动方法3：使用::after伪元素，并给::after设置content,clear,display */
            /* div::after{
                content:'';
                clear:both;
                display:block;
            }
            div{margin:10px} */
        /* 清除浮动方法4：在两个父盒子之间隔墙 */
        .qiang{clear:both;height: 10px;}
        p{
            width: 100px;
            height: 100px;
            background-color: red;
            margin:2px;
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
        <p></p>
    </div>
    <div class="qiang"></div>
    <div class="box2">
        <p></p>
        <p></p>
    </div>
    
</body>
</html>